<template>
  <div>
    <div class="avatar">
      <img src="@/assets/images/avatar.png" alt="">
      <div class="nick-name" @click="handleLogin">立即登录</div>
    </div>
    <ul class="my-order-tab flex items-center">
      <li class="relative flex-1">
        <img src="@/assets/images/emm_selected.png" alt="">
        <span>1</span>
        <div>电影订单</div>
      </li>
      <li class="relative flex-1">
        <img src="@/assets/images/emm_selected.png" alt="">
        <span>99+</span>
        <div>商品订单</div>
      </li>
    </ul>
    <div class="margin-set my-card flex items-center">
      <img src="@/assets/images/emm_selected.png" width="20px" height="20px" alt="">
      <span class="label">卖座券</span>
      <img src="@/assets/images/arrow_right.png" alt="" class="arrow">
    </div>
    <div class="margin-set my-card flex items-center">
      <img src="@/assets/images/emm_selected.png" width="20px" height="20px" alt="">
      <span class="label">组合红包</span>
      <img src="@/assets/images/arrow_right.png" alt="" class="arrow">
    </div>
    <div class="margin-set my-card flex items-center">
      <img src="@/assets/images/emm_selected.png" width="20px" height="20px" alt="">
      <span class="label">余额</span>
      <span class="value">
        <span class="price-decimal price-fmt">
          <i>￥</i>
          <span class="interge">0</span>
        </span>
      </span>
      <img src="@/assets/images/arrow_right.png" alt="" class="arrow">
    </div>
    <div class="margin-set my-card flex items-center">
      <img src="@/assets/images/emm_selected.png" width="20px" height="20px" alt="">
      <span class="label">设置</span>
      <img src="@/assets/images/arrow_right.png" alt="" class="arrow">
    </div>
  </div>
</template>

<script>
export default {
  // beforeRouteEnter (to, from, next) {
  // ...组件内的路由拦截
  // },
  name: 'Center',
  data () {
    return {

    }
  },
  methods: {
    handleLogin () {
      this.$router.push('/login')
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar {
  text-align: center;
  margin-top: -44px;
  height: 2rem;
  padding-left: .22rem;
  padding-top: .64rem;
  background: #ff5f16;
  display: flex;
  align-items: center;
  color: #fff;
  img {
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    margin-right: .2rem;
    border: .02rem solid #fff;
  }
  .nick-name {
    font-size: .16rem;
  }
}
.my-order-tab {
  width: 100%;
  height: .8rem;
  margin-bottom: .1rem;
  font-size: .13rem;
  color: #797d82;
  background: #fff;
  text-align: center;
  img {
    width: .3rem;
    height: .3rem;
    margin-bottom: .02rem;
  }
  // .mint-badge {
  span {
    position: absolute;
    left: 52%;
    top: 0;
    font-size: .1rem;
    height: .16rem;
    line-height: .18rem;
    min-width: .16rem;
    color: #fff;
    text-align: center;
    background: #ff5f16;
    border-radius: .08rem;
  }
}
.margin-set {
  position: relative;
  padding: 0 .15rem;
  height: .5rem;
  font-size: .15rem;
  background: #fff;
  img {
    width: .28rem;
    height: .28rem;
  }
  .label {
    flex: 1;
    margin-left:.05rem;
    color: #191a1b;
  }
  .value {
    padding-right: .12rem;
    color: #797d82;
    text-align: right;
  }
  .arrow {
    width: .06rem;
    height: .1rem;
    text-align: right;
  }
  :after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #ededed;
    color: #ededed;
    transform-origin: 0 100%;
    transform: scaleY(.5);
    left: .15rem;
  }
}
</style>
